<%= include ic/header.html %>
<style>
#main{text-align:center;padding:20px 0;}
#content{text-align:left;width:100%;width:1024px;margin:auto;padding:10px;}
#content-title{width:100%;height:30px;background:url('/i/title_baby.png') no-repeat center;margin-bottom:30px;}
#searchBox{border:1px solid #243D7A;padding:12px 12px 24px;}
#searchBox .li{width:100%;height:auto;padding:12px 12px 0;overflow:hidden;}
#searchBox .li:last-child{border-bottom:none;}
#searchBox .li .title{width:10%;max-width:40px;float:left;color:#A9A9A9;}
#searchBox .li .list{width:90%;float:left;}
#searchBox .li .list .fl{float:left;width:58px;}
#searchBox .li .list .fr{float:left;width:800px;}
#searchBox .li .list span{float:left;color:#A9A9A9;}
#searchBox .li .list a{color:#A9A9A9;padding:0 12px;line-height:1em;}
#searchBox .li .list a:hover{color:#243D7A}
#searchBox .li .list a.c{color:#243D7A;font-weight:800;}
#searchBox .li .list span:first-child a{border-left:none;}

#orderBar{margin:15px 0;}
#orderBar .am-fl{border:1px solid #243D7A;margin-right:12px;height:30px;line-height:27px;overflow:hidden;padding:0;}
#orderBar a{padding:5px 12px;line-height:27px;}
#orderBar a.c{background:#243D7A;color:#fff;font-weight:400;}
#total-data{float:left;height:27px;line-height:27px;color:#a1a1a1;}


.Bar{padding:10px 0;}
.Bar a{color:#a1a1a1;padding:0 10px 2px;line-height:1em;}
.Bar a.sp{border:1px solid #a1a1a1;margin:0 10px;}
.Bar a:hover{background:#243D7A;color:#fff;}
.Bar a.c{color:#243D7A;font-weight:800;}
.Bar a.c:hover{background:none;}
.Bar a.sp:hover{border:1px solid #243D7A;}

#itemList li{padding:20px 10px 0;text-align:center;font-family:"宋体";overflow:hidden;}
#itemList li .img{width:80%;margin:0 10% 0;overflow:hidden;position:relative;}
#itemList li .img .b{position:absolute;top:0;left:0;visibility:hidden;}
#itemList li a{color:#1D1D1B}
#itemList li a:hover{text-decoration:underline;}

#paperBar{text-align:center;}
</style>
<div class="am-cf" id="main">
  <div id="content">
    <% if(type){ %>
    <div id="content-title" style="background-image:url('/i/title_<%= type %>.png')"></div>
    <% } %>
    <div id="searchBox">
      <% if(typeof(keyword)!="undefined"){ %>
      <div class="li">
        <div class="title">搜索</div>
        <div class="list" style="padding:0 12px"><span>“<%= keyword %>”</span></div>
      </div>
      <% } %>
      <div class="li">
        <div class="title">品牌</div>
        <div class="list" id="brandList">
          <div class="fl">
            <span><a class="all c" href="javascript:void(0)" onclick="setBrand(this)">全部</a></span>
          </div>
          <div class="fr">
            <% for(var i=0;i<brands.length;i++){ %>
            <span>/<a objId="<%= brands[i].id %>" class="brand" href="javascript:void(0)" onclick="setBrand(this)"><%= brands[i].get("name") %></a></span>
            <% } %>
          </div>
        </div>
      </div>
      <div class="li">
        <div class="title">类别</div>
        <div class="list" id="typeList">
          <div class="fl">
            <span><a class="all c" href="javascript:void(0)" onclick="setType(this)">全部</a></span>
          </div>
          <div class="fr">
          <% for(var i=0;i<data.type.length;i++){ %>

            <span>/<a class="type" href="javascript:void(0)" onclick="setType(this)"><%= data.type[i] %></a></span>
          <% } %>
          </div>
        </div>
      </div>
      <div class="li">
        <div class="title">尺寸</div>
        <div class="list" id="sizeList">
          <div class="fl">
          <span><a class="all c" href="javascript:void(0)" onclick="setSize(this)">全部</a></span>
          </div>
          <div class="fr">
            <% for(var i=0;i<data.size.length;i++){ %>

              <span>/<a class="size" href="javascript:void(0)" onclick="setSize(this)"><%= data.size[i] %></a></span>
            <% } %>
          </div>
        </div>
      </div>
      <div class="li">
        <div class="title">价格</div>
        <div class="list" id="priceList">
          <div class="fl">
            <span><a class="all c" href="javascript:void(0)" minprice=0 maxprice="!" onclick="setPrice(this)">全部</a></span>
          </div>
          <div class="fr">
            <span>/<a href="javascript:void(0)" minprice=0 maxprice=100 onclick="setPrice(this)">100元以下</a></span>

            <span>/<a href="javascript:void(0)" minprice=100 maxprice=300 onclick="setPrice(this)">100-300元</a></span>

            <span>/<a href="javascript:void(0)" minprice=300 maxprice=500 onclick="setPrice(this)">300-500元</a></span>

            <span>/<a href="javascript:void(0)" minprice=500 maxprice=1000 onclick="setPrice(this)">500-1000元</a></span>

            <span>/<a href="javascript:void(0)" minprice=1000 maxprice=1500 onclick="setPrice(this)">1000-1500元</a></span>

            <span>/<a href="javascript:void(0)" minprice=1500 maxprice="!" onclick="setPrice(this)">1500元以上</a></span>
          </div>
        </div>
      </div>
    </div>
    <div class="am-cf Bar" id="orderBar">
      <div class="am-fl"><a class="c ordertype" type="postedAt" href="javascript:void(0)" onclick="setOrder(this)">上新时间 <font>&darr;</font></a><a class="ordertype" type="price" href="javascript:void(0)" onclick="setOrder(this)">价格 <font>&uarr;</font></a></div>
      <div class="am-fl"><a class="c avg3" href="javascript:void(0)" onclick="setAvg(3)">每排3件</a><a class="avg6" href="javascript:void(0)" onclick="setAvg(6)">每排6件</a></div>
      <div id="total-data">正在显示 <font class="pagesize">0</font> 条，共 <font class="total">0</font> 商品</div>
    </div>
    <ul id="itemList" class="am-avg-sm-3 am-cf"></ul>
    <hr/>
    <div class="am-cf Bar" id="paperBar">
      <a class="sp" href="javascript:void(0)">&lt;</a><a class="c" href="javascript:void(0)">1</a><a class="sp" href="javascript:void(0)">&gt;</a>
    </div>
  </div>
</div>
<%= include ic/footer.html %>
<script type="text/javascript">
var page=1,minprice=0,maxprice="！",orderby="postedAt",ordertype="desc",
keyword="<% if(keyword){ %><%= keyword %><% } %>";
var $loading = $("#my-modal-loading");
$(function() {
  $(window).resize(function(){
    fixImg();
  });
  getItem();
});

function fixImg(){
  $("#itemList>li .img").height($("#itemList li .img").first().width());
  $("#itemList>li .img").map(function(){
    var w=$(this).innerWidth();
    if($(this).children("a").children("img").width() / $(this).children("a").children("img").height()>1){
      $(this).children("a").children("img").height(w);
      $(this).children("a").children("img").css("width","auto");
    }else{
      $(this).children("a").children("img").width(w);
      $(this).children("a").children("img").css("height","auto");
    }
  });
}

function setAvg(int){
  if(int==6 && $(".avg3").hasClass("c")){
    $(".avg6").addClass("c");
    $(".avg3").removeClass("c");
    $("#itemList").removeClass("am-avg-sm-3");
    $("#itemList").addClass("am-avg-sm-6");
    fixImg();
  }else if(int==3 && $(".avg6").hasClass("c")){
    $(".avg3").addClass("c");
    $(".avg6").removeClass("c");
    $("#itemList").removeClass("am-avg-sm-6");
    $("#itemList").addClass("am-avg-sm-3");
    fixImg();
  }
}

function setPage(int){
  page=int;
  getItem();
}

function setBrand(obj){
  if($(obj).hasClass("all")){
    $("#brandList .brand").removeClass("c");
    $(obj).addClass("c");
  }else if($(obj).hasClass("c")){
    $(obj).removeClass("c");
    if($("#brandList .brand.c").size()==0){
      $("#brandList .all").addClass("c");
    }
  }else{
    $("#brandList .all").removeClass("c");
    $(obj).addClass("c");
  }
  page=1;
  getItem();
}

function setType(obj){
  if($(obj).hasClass("all")){
    $("#typeList .type").removeClass("c");
    $(obj).addClass("c");
  }else if($(obj).hasClass("c")){
    $(obj).removeClass("c");
    if($("#typeList .type.c").size()==0){
      $("#typeList .all").addClass("c");
    }
  }else{
    $("#typeList .all").removeClass("c");
    $(obj).addClass("c");
  }
  page=1;
  getItem();
}

function setSex(obj){
  if($(obj).hasClass("all")){
    $("#sexList .sex").removeClass("c");
    $(obj).addClass("c");
  }else if($(obj).hasClass("c")){
    $(obj).removeClass("c");
    if($("#sexList .sex.c").size()==0){
      $("#sexList .all").addClass("c");
    }
  }else{
    $("#sexList .all").removeClass("c");
    $(obj).addClass("c");
  }
  page=1;
  getItem();
}

function setPrice(obj){
  $("#priceList .c").removeClass("c");
  $(obj).addClass("c");
  minprice=$("#priceList .c").attr("minprice");
  maxprice=$("#priceList .c").attr("maxprice");
  page=1;
  getItem();
}

function setOrder(obj){
  var old=$(".ordertype.c").attr("type");
  $(".ordertype.c").removeClass("c");
  $(obj).addClass("c");
  if(old==$(obj).attr("type")){
    //console.log($(obj).children("font").html()+"&darr;");
    if($(obj).children("font").html()=="↓"){
      $(obj).children("font").html("&uarr;");
    }else{
      $(obj).children("font").html("&darr;");
    }
  }else{
    orderby=$(".ordertype.c").attr("type");
  }
  if($(obj).children("font").html()=="↓"){
    ordertype="desc";
  }else{
    ordertype="asc";
  }
  page=1;
  getItem();
}

function getItem(){
  var size	= $("#searchBox .size.c").map(function(n,obj){
    return $(obj).text();
  }).get().join(',');
	var brand	= $("#searchBox .brand.c").map(function(n,obj){
    return $(obj).attr("objId");
  }).get().join(',');
	var type	= $("#searchBox .type.c").map(function(n,obj){
    return $(obj).text();
  }).get().join(',');
	var sex		= $("#searchBox .sex.c").map(function(n,obj){
    return $(obj).text();
  }).get().join(',');
  $loading.modal('open');
  $.get("/getitems", {
    "ajax"		: true,
    size      : size,
    brand     : brand,
    type      : type,
    sex       : sex,
    minprice  : minprice,
    maxprice  : maxprice,
    page      : page,
    orderby   : orderby,
    ordertype : ordertype,
    keyword   : keyword,
    isNew     : "<%= type %>"
  },function(data){
    $loading.modal('close');
    if(typeof(data)=="object" && typeof(data.error)=="undefined"){
      $("#itemList").html("");
      $("#paperBar").html("");
      var items = data.items;
      var pager = data.pager;
      for(var i=0;i<items.length;i++){
        var html='<li><div class="img">'
            +'<a href="/itemdetail?id='+items[i].id+'">'
            +'<img src="/p?id='+items[i].cover
            +'&w=400&h=400" onload="fixImg()" >';
        if(items[i].bcover){
          html+='<img class="b" src="/p?id='+items[i].bcover
              +'&w=400&h=400" onload="fixImg()" >';
        }
        html+='</a></div><div class="text">'
            +'<a href="/itemdetail?id='+items[i].id+'">'
            +items[i].Brand+'<br/>'+items[i].title
            +'<br/>￥'+items[i].price+'</a></div></li>';
        $("#itemList").append(html);
      }
      //console.dir(data.pager);
      $("#paperBar").append('<a class="sp" onclick="setPage('+pager.firstPage+')" href="javascript:void(0)">&lt;</a>');
      for(var i=0;i<pager.pageArray.length;i++){
        if(pager.pageArray[i]==pager.currentPage){
          $("#paperBar").append('<a class="c" onclick="setPage('+pager.pageArray[i]+')" href="javascript:void(0)">'+pager.pageArray[i]+'</a>');
        }else{
          $("#paperBar").append('<a onclick="setPage('+pager.pageArray[i]+')" href="javascript:void(0)">'+pager.pageArray[i]+'</a>');
        }
      }
      if(pager.pagesize>items.length){
        $("#total-data .pagesize").text(items.length);
      }else{
        $("#total-data .pagesize").text(pager.pagesize);
      }
      $("#total-data .total").text(pager.total);
      $("#paperBar").append('<a class="sp" onclick="setPage('+pager.lastPage+')" href="javascript:void(0)">&gt;</a>');
      $("#itemList li").hover(function(){
        //console.log($(this).find('.b'));
        $(this).find('.b').css("visibility","visible");
      },function(){
        $(this).find('.b').css("visibility","hidden");
      });
    }else{
      //console.dir(data);
      mAlert({
        title:"错误",
        text:data.error,
        onConfirm:function(e) {}
      });
    }
  }, "json");
}
</script>
